import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
// 注意: App组件更新了,则App下面所有的组件都会更新
export default class App extends Component {
  state = {
    // 由于Header,Footer,List,Item都需要这一份数据,所以定义在他们的父组件中(称为状态提升)
    todos: [
      {
        id: 1,
        todoName: '洗脚',
        isDone: true,
      },
      {
        id: 2,
        todoName: '游泳',
        isDone: false,
      },
    ],
  }
  // 添加任务的函数
  addTodo = (todoName) => {
    // console.log(todoName)
    // 根据任务名创建任务对象
    const obj = {
      id: Date.now(),
      todoName,
      isDone: false,
    }
    // 将这个新的任务对象,添加到状态的todos数组中
    this.state.todos.push(obj)
    // 调用setState,让组件更新
    this.setState({
      todos: this.state.todos,
    })
  }
  //修改任务是否完成的函数
  updateTodo = (id) => {
    // console.log(id)
    // 根据id找到对应的任务对象,将任务对象的isDone取反
    this.state.todos.forEach((item) => {
      if (id === item.id) {
        item.isDone = !item.isDone
      }
    })

    //让app组件更新
    this.setState({
      todos: this.state.todos,
    })
  }
  // 删除一条任务的函数
  delTodo = (id) => {
    // 根据id删除todos中的一个任务对象
    // 数组的filter方法返回一个过滤后的数组
    const newTodos = this.state.todos.filter((item) => {
      // if (item.id === id) {
      //   return false
      // } else {
      //   return true
      // }
      return item.id !== id
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 全选按钮的函数
  allCheck = (target) => {
    // 在App组件中将所有的数据的isDone改为目标值
    this.state.todos.forEach((item) => {
      item.isDone = target
    })
    this.setState({
      todos: this.state.todos,
    })
  }

  // 清除已完成任务
  clearAllDone = () => {
    const newTodos = this.state.todos.filter((item) => !item.isDone)
    this.setState({
      todos: newTodos,
    })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          {todos.length ? (
            <div>
              <List
                todos={todos}
                updateTodo={this.updateTodo}
                delTodo={this.delTodo}
              ></List>
              <Footer
                todos={todos}
                allCheck={this.allCheck}
                clearAllDone={this.clearAllDone}
              ></Footer>
            </div>
          ) : (
            <h1>暂无任务</h1>
          )}
        </div>
      </div>
    )
  }
}
